<template>
    <el-col>
        <el-row :gutter="20" class="padd20" style="margin-top: 20px;">
            <el-col :span="6" class="col-list cp mb20" v-for="(item,index) in courseList" :key="index" @click.native="goCourseInfo(item.id)">
                <div class="grid-content bg-purple">
                    <el-col class="tr">
                        <span class="create-tips tr">{{item.sourceFrom}}</span>
                    </el-col>
                    <el-col class="box box-pack-between">
                        <div class="box box-align-center">
                            <el-avatar size="large" :src="item.image"></el-avatar>
                            <span class="ml10 school-name">{{item.name}}</span>

                        </div>
                    </el-col>
                    <el-col class="tl mt10 mb10">
                        <span class="service-tips">{{item.status}}</span>
                    </el-col>
                    <el-col class="box box-pack-between box-align-center btn">
                        <div class="validity-tips tl">
                            有效期至：{{item.endTime}}
                        </div>
                    </el-col>
                </div>
            </el-col>
        </el-row>
    </el-col>
</template>

<script>
    export default {
        data() {
            return {
                searchText: '',
                courseList:[],
                schoolid:this.$store.getters.getLoginInfo.user.schoolId,
            };
        },
        mounted() {
            this.getCourse();
        },
        methods: {
            getCourse() {
                var params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getCourseData(params).then(res => {
                    if (res.code == '0') {
                        this.courseList = res.list;
                    }
                })
            },
            goCourseInfo(id) {
                console.log(id);
                this.$router.push({
                    path:'/ldkc/kcxq',
                    query:{
                        id:id
                    }
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    @media (max-width: 1400px) {
        .padd20{
            padding: 0 !important;
        }
        .grid-content{
            padding: 10px 0 !important;
        }
    }
    @media screen and (min-width: 1540px) {
        .grid-content{
            padding: 10px 20px !important;
        }
    }
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .col-list {
        border-radius: 12px;
    }

    .bg-purple {
        background: #FFFFFF;
        // box-shadow: 1px 4px 13px 0px rgba(225, 227, 245, 0.69);
    }

    .bg-purple:hover{
        box-shadow: 1px 4px 13px 0px rgba(225, 227, 245, 0.69);
    }

    .grid-content {
        padding: 10px;
        border-radius: 4px;
        min-height: 140px;

        .school-name{
            font-size: 16px;
            font-weight: 600;
        }

        .create-tips{
            font-size: 12px;
            color: #888F9E;
        }
        .service-tips{
            font-size: 16px;
            color: #23C083;
            font-weight: 600;
        }
        .validity-tips{
            font-size: 12px;
            color: #5F6572;
        }
    }
</style>
